<template>
    <view class="loading_box" v-show="is_loading" @click="switch_loading">
        <view class="loading">
           <image style="width: 120rpx; height: 180rpx;border-radius: 10rpx;" mode="aspectFit" src="../../static/loading3.gif"></image>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        },
        methods:{
            switch_loading(){
                this.$store.commit("switch_loading")
            }
        },
        //实测直接在标签属性里写  $store.state.XX  拿不到数据  所以这里通过 计算属性去监听一下
        computed:{
            is_loading(){
                return this.$store.state.loading
            }
        }
    }
</script>
<style>
	.loading_box{
		width: 120rpx;
		height: 180rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -60rpx;
		margin-top: -90rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
</style>